<template>
    <div id="publishWorks">
        <div class="title">发布作品</div>
        <!-- 列表 -->
        <div class="content">
            <div class="headline">
                <div class="left">标题：</div>
                <el-input v-model="titleInput" placeholder="请输入您要发布的标题，最多可输入20字！" class="right"></el-input>
            </div>
            <div class="type">
                <div class="left">类型：</div>
                <el-radio-group v-model="radio" class="right">
                    <el-radio :label="1" size="18">音乐</el-radio>
                    <el-radio :label="2" size="18">舞蹈</el-radio>
                    <el-radio :label="3" size="18">书画</el-radio>
                    <el-radio :label="4" size="18">摄影</el-radio>
                </el-radio-group>
            </div>
            <div class="addCover">
                <div class="left">添加封面：</div>
                <div class="right">
                    <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card"
                        :on-preview="handlePictureCardPreview" :on-remove="handleRemove" class="cover">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <div>建议大小在1M以内</div>
                </div>
            </div>
            <div class="addVideo">
                <div class="left">添加视频：</div>
                <div class="right">
                    <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card"
                        :on-preview="handlePictureCardPreview" :on-remove="handleRemove" class="video">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <div>建议大小在20M以内</div>
                </div>
            </div>
            <div class="details">
                <div class="left">详情：</div>
                <el-input type="textarea" v-model="detailsInput" maxlength="100" show-word-limit placeholder="请输入您要发布的详情，最多可输入100字！" class="right"></el-input>
            </div>
            <div class="button">
                <div class="confirm">确认发布</div>
                <div class="cancel">取消</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
	data() {
		return {
            titleInput: "", // 标题输入值
            radio: 0, // 单选
            dialogImageUrl: '',
            dialogVisible: false,
            detailsInput: "", // 详情输入值
        };
	},
    mounted(){},
	methods: {
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        }
    },
    watch: {},
}
</script>

<style scoped lang="less">
@media screen and (min-width: 1400px){
    #publishWorks{
        padding: 3% 5%;
        .title{
            width: 100%;
            font-size: 24px;
            text-align: center;
            padding-bottom: 2%;
            border-bottom: 1px solid #ddd;
        }
        // 列表
        .content{
            width: 100%;
            height: 400px;
            overflow: auto;
            // 标题
            .headline{
                width: 100%;
                margin-top: 3%;
                display: flex;
                justify-content: center;
                align-items: center;
                .left{
                    width: 15%;
                    font-size: 18px;
                    text-align: center;
                }
                .right{
                    width: 80% !important;
                    margin-right: 5%;
                    line-height: 40px;
                }
            }
            // 类型
            .type{
                width: 100%;
                margin-top: 3%;
                display: flex;
                justify-content: center;
                align-items: center;
                .left{
                    width: 15%;
                    font-size: 18px;
                    text-align: center;
                }
                .right{
                    width: 85% !important;
                }
                /deep/.el-radio{
                    line-height: 40px;
                }
            }
            // 添加封面and添加视频
            .addCover,.addVideo{
                width: 100%;
                margin-top: 3%;
                display: flex;
                justify-content: center;
                align-items: center;
                .left{
                    width: 15%;
                    font-size: 18px;
                    text-align: center;
                }
                .right{
                    width: 85% !important;
                    div{
                        font-size: 14px;
                        color: #ccc;
                    }
                }
            }
            // 详情
            .details{
                width: 100%;
                margin-top: 3%;
                display: flex;
                justify-content: center;
                align-items: center;
                .left{
                    width: 15%;
                    font-size: 18px;
                    text-align: center;
                }
                .right{
                    width: 80% !important;
                    margin-right: 5%;
                    line-height: 40px;
                }
            }
            .button{
                width: 100%;
                text-align: center;
                line-height: 40px;
                font-size: 18px;
                margin-top: 3%;
                display: flex;
                justify-content: center;
                .confirm{
                    width: 20%;
                    color: white;
                    background: #F39E2A;
                }
                .cancel{
                    width: 20%;
                    margin-left: 3%;
                    background: #ccc;
                }
            }
        }
    }
}
</style>